<template>
	<div class="table">
		<div class="container">
			<!-- header-筛选 -->
			<div class="handle-box">
				<div class="tap-wrap" style="text-align: right;margin-bottom: 20px;">
					<el-button type="success" @click="goAdd">新增</el-button>
				</div>
			</div>
			<el-row :gutter="0">
				<el-col :span="4">
					<p style="margin-bottom: 15px;font-size: 18px;">负责人：</p>
					<div class="tree-wrap">

						<el-tree :data="managerData" accordion :highlight-current="true" node-key="id" :default-checked-keys="managerId"
						 :props="defaultProps" @node-click="handleNodeClick">
						</el-tree>
					</div>
				</el-col>
				<el-col :span="20">
					<el-table :data="tableData" border :stripe="true" style="width: 100%;" ref="multipleTable">
						<el-table-column prop="name" label="姓名">
						</el-table-column>
						<el-table-column prop="gender" label="性别">
						</el-table-column>
						<el-table-column prop="phone" label="手机号">
						</el-table-column>
						<el-table-column label="操作" width="245" fixed="right">
							<template slot-scope="scope">
								<el-button type="primary" @click="goEdit(scope.row)">编辑</el-button>
								<el-button type="danger" @click="goDelete(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination" v-if="tableData.length != 0">
						<el-pagination @current-change="getTableList" :page-size="pageSize" :current-page.sync="pageNum" layout="total,prev, pager, next,jumper,slot"
						 :page-count="pages" :total="total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>

			<!-- 新增弹窗 -->
			<el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false">
				<div style="color:red;padding:0 30px 15px;text-align: center;">*如果输入的手机号用户已在系统中，则会使用原手机号信息录入</div>
				<el-form :model="form" ref="form" :rules="rules" style="width:400px;margin: 0 auto;" label-width="100px">
					<el-form-item label="所属负责人" prop="managerUser" v-if="showDisabled == false">
						<el-select v-model="form.managerUser" placeholder="请选择">
							<el-option v-for="item in managerData" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="手机号" prop="phone" v-if="showDisabled == false">
						<el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
					</el-form-item>
					<el-form-item label="姓名" prop="name">
						<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="gender">
						<el-select v-model="form.gender" placeholder="请选择性别">
							<el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="出生日期" prop="birthday">
						<el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="地址" prop="address">
						<el-input v-model="form.address" placeholder="请输入地址"></el-input>
					</el-form-item>
					<el-form-item label="头像" prop="avatar">
						<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
						 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="form.avatar" :src="form.avatar" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('form')">保存</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import md5 from 'js-md5'; //md5加密
	export default {
		name: 'user',
		data() {

			return {
				managerData: [], //树形图数据
				defaultProps: {
					children: 'list',
					label: 'name'
				},
				showDisabled: false,
				sexList: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				managerId: [],
				dialogFormVisible: false,
				form: {
					adminUser: '',
					password: '',
					name: '',
					gender: '',
					phone: '',
					address: '',
					avatar: '',
					birthday: '',
					type: 4
				},
				rules: {
					managerUser: [{
						required: true,
						message: '请选择负责人',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入电话',
						trigger: 'blur'
					}],
				},

				tableData: [], //表数据
				pageSize: 0,
				pageNum: 1,
				pages: 0,
				total: 0,
			}
		},
		mounted() {
			this.getUserManager();
		},
		watch: {
			// 监测 route 参数变化
			'$route'(to, from) {
				if (to.path == '/user') {
					this.getUserManager();
				}
			}
		},
		methods: {
			//获取负责人列表 - 左侧树状图数据
			getUserManager() {
				let that = this;
				that.HttpUtil.get(that, that.Global.URLPATH.GETMANAGEUSERNOPAGE, {
					type: 1
				}, function(res) {
					if (res.status == 0) {
						for (let i = 0; i < res.data.length; i++) {
							res.data[i].list = [];
						}
						that.managerData = res.data;
						console.log(that.managerData)
						var lmx = [];
						lmx.push(res.data[0].id);
						that.managerId = lmx;
						that.getTableList();
					}
				}, function(res) {
					console.log(res.msg)
				})
			},
			//树状列表
			handleNodeClick(data) {
				this.tableData = [];
				let strArr = [];
				strArr.push(data.id);
				this.managerId = strArr;
				this.getTableList(1);
			},
			//新增
			goAdd() {
				this.showDisabled = false;
				this.form = {
					// user_name: '',
					password: '',
					name: '',
					gender: '',
					phone: '',
					address: '',
					avatar: '',
					birthday: '',
					type: 4
				};
				this.dialogFormVisible = true
			},
			//编辑
			goEdit(row) {
				let that = this;
				that.showDisabled = true;
				that.dialogFormVisible = true;
				that.form = row;
			},
			//删除
			goDelete(row) {
				let that = this;
				that.$confirm('介绍人是否确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.HttpUtil.delete(that, that.Global.URLPATH.ADDUSER + row.id, {},
						function(res) {
							if (res.status == 0) {
								that.$message.success('删除成功！')
								that.getTableList();
							}
						},
						function(res) {
							console.log(res.msg)
						})
				}).catch(() => {
					that.$message.success("已取消删除");
				});
			},
			//头像上传
			handleAvatarSuccess(res, file) {
				this.form.avatar = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			//获取表数据
			getTableList(pageNum) {
				let that = this;
				pageNum = pageNum ? pageNum : that.pageNum;
				that.HttpUtil.get(that, that.Global.URLPATH.GETMANAGEUSER, {
					type: 4,
					pageNum: pageNum,
					managerUser: that.managerId[0],
					size: 10
				}, function(res) {
					if (res.status == 0) {
						if (res.data.list.length == 0) {
							that.$message.warning('暂无数据！');
							that.tableData = [];
						} else {
							that.tableData = res.data.list;
							for (let i = 0; i < res.data.list.length; i++) {
								if (res.data.list[i].gender == 1) {
									that.tableData[i].gender = '男';
								} else if (res.data.list[i].gender == 2) {
									that.tableData[i].gender = '女';
								} else {
									that.tableData[i].gender = '';
								}
							}
							that.pages = res.data.pages;
							that.total = res.data.total;
							that.pageSize = res.data.pageSize;
							that.pageNum = res.data.pageNum;
						}
					}
				}, function(res) {
					console.log(res.msg);
				})

			},

			//新增驻场用户列表
			submitForm(formName) {
				let that = this;
				that.$refs[formName].validate((valid) => {
					if (valid) {
						that.form.user_name = that.form.phone;
						if (that.form.id) {
							that.HttpUtil.put(that, that.Global.URLPATH.ADDUSER + that.form.id, {
								name: that.form.name,
								gender: that.form.gender,
								address: that.form.address,
								avatar: that.form.avatar,
								birthday: that.form.birthday
							}, function(res) {
								if (res.status == 0) {
									that.$message.success('保存成功！')
									that.dialogFormVisible = false;
									that.getTableList();
								}
							}, function(res) {
								console.log(res.msg)
							})
						} else {
							//新增
							that.form.password = md5(that.form.password);
							that.HttpUtil.post(that, that.Global.URLPATH.ADDUSER, that.form,
								function(res) {
									if (res.status == 0) {
										that.dialogFormVisible = false;
										that.getTableList();
									}
								},
								function(res) {
									console.log(res.msg)
								})
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style>
	@import url("../../../assets/css/common.css");

	.handle-box {
		margin-bottom: 20px;
	}

	/* 头像上传 */
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader>.el-upload--text {
		width: 120px;
		height: 120px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}
</style>
